﻿<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,graph,canvas,xml,mileage">
<meta name="generator" content="Bluefish 2.0.1" >
<title>LancerCediaWagonMileage</title>
<STYLE type="text/css">
 	body {
		background-color: #EEFFAA;
	}
	h1 {
		font-size:15px;
		line-height: 70%;
	}
	h3 {
		font-size:12px;
	}
	#ctrlpanel {
		background-color: #CCEEAA;
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		border: 2px #222222 solid;
	}
	#instruction {
		width:40%;
		padding : 5px;
		border: 1px #555555 solid;
	}
	#stastistics {
		width: 30%;
		padding : 5px;
		border: 1px  #555555 solid;
 	}
	#command {
		width: 30%;
		padding : 5px;
		border: 1px  #555555 solid;
	}
	#chart {
		margin-left:auto;
		margin-right:auto;
		text-align:left;
	}
	td {
		vertical-align: top;
	}
	.arrow {
		width: 30px;
		height: 38px;
	}
	
	.submitButton {
		background-color: #ffff00;
		border: 2px solid #444422;
		color: #000033;
	}
	.argButton {
		background-color: #CCCCFF;
		border: 2px solid #333311;
		color: #000033;
	}
		
</STYLE>
<script>
	var	level = 1;
	function setNaviPath(isOut) {
		var mainWindow = window.parent;
		if (isOut == false) {
			mainWindow.document.getElementById('path' + level + "lnk").innerHTML = "";
//			mainWindow.document.getElementById('path' + level + "lnk").href = "";
			mainWindow.document.getElementById('path' + level + "txt").innerHTML = "&gt; Car Mileage ";
			for (var i = 2; i < 5; i++) {
				mainWindow.document.getElementById('path' + i + "lnk").innerHTML = "";
//				mainWindow.document.getElementById('path' + i + "lnk").href = "";
				mainWindow.document.getElementById('path' + i + "txt").innerHTML = "";
			}
		} else {
			var tmp = mainWindow.document.getElementById('path' + level + "lnk")
			tmp.innerHTML = "&gt; Car Mileage ";
			tmp.href = "javascript:void(0)";
//			mainWindow.document.getElementById('path' + level + "lnk").innerHTML = "> Car Mileage ";
//			mainWindow.document.getElementById('path' + level + "lnk").href = "./graph.html";
			mainWindow.document.getElementById('path' + level + "txt").innerHTML = "";
//			mainWindow.document.getElementById('path' + (level + 1) + "lnk").innerHTML = "";
			mainWindow.document.getElementById('path' + (level + 1) + "txt").innerHTML = "&gt; Data ";
		}
	}
</script>
<script>

	//   var lastX = context.canvas.width * Math.random();
	//   var lastY = context.canvas.height * Math.random();

	var dataNum = 0;
	var startDate = Date();
	var endDate = Date();
	var totalPriceMax = 0;
	var totalPrice = 0;
	var totalMileageMax = 0;
	var totalMileage = 0;
	var totalGasMax = 0.0;
	var totalGas = 0.0;
	var hue = 0;
	var xmldoc;
	var stl;
	var stlCom;
	var lastStartDate;
	var lastEndDate;

	
	function style(data,type,kind,src,max,min) {
		this.data = data;
		this.type = type;
		this.kind = kind;
		this.src = src;
		this.max = max;
		this.min = min;
		this.unit = "";
		this.color = "";
	}
	
	function styleCommon(startDate, endDate) {
		this.startDate = Date.parse(startDate);
		this.endDate = Date.parse(endDate);
		this.staInx = 0;
		this.endInx = 0;
		
	}
	
	function setStyleDomain(side) {
		var sumValue = 0.0;
		var tmpValue = 0.0;
		var tmpDate = 0;
		var bas = 250;
		var amb1 = 0;
		var amb2 = 0;
		var isIn = new Boolean(true);
		
		amb1 = 80 * parseInt(stl[side].type);
		amb2 = 80 * parseInt(stl[side].kind);
		if (stl[side].data == "0") {
			stl[side].unit = "km";
			stl[side].color = 'rgba(' + bas + ',' + amb1 + ',' + amb2 + ',0.9)';
//			stl[side].color = "#ff0" + parseInt(10 * Math.random()) + "0" +  parseInt(10 * Math.random());
		} else if (stl[side].data == "1") {
			stl[side].unit = "l";
			stl[side].color = 'rgba(' + amb1 + ',' + bas + ',' + amb2 + ',0.9)';
//			stl[side].color = "#0" + parseInt(10 * Math.random()) + "ff0" +  parseInt(10 * Math.random());
		} else {
			stl[side].unit = "yen";
			stl[side].color = 'rgba(' + amb1 + ',' + amb2 + ',' + bas + ',0.9)';
//			stl[side].color = "#0" + parseInt(10 * Math.random()) + "0" +  parseInt(10 * Math.random()) + "ff";
		}
		for (i=dataNum -1; i >= 0; i--) {
			tmpDate = Date.parse(xmlDoc.getElementsByTagName("supplyDetail")[i].getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue);
			tmpValue = parseFloat(xmlDoc.getElementsByTagName("supplyDetail")[i].getElementsByTagName(stl[side].src)[0].childNodes[0].nodeValue);
			sumValue += tmpValue;
			if ((tmpDate >= stlCom.startDate) && 
				(tmpDate <= stlCom.endDate)) {
				isIn = true;
				if (side == 0) {
					if (tmpDate == stlCom.startDate) {
						stlCom.staInx = i;
					}
					if (tmpDate == stlCom.endDate) {
						stlCom.endInx = i;
					}
				}
			} else {
					isIn = false;
			}
			
			if (stl[side].type == 0) { // 
				if (tmpDate == stlCom.startDate) {
					stl[side].min = sumValue;
				}
				if (tmpDate == stlCom.endDate) {
					stl[side].max = sumValue;
				}
			} else { // ñ
				if (isIn) {
					if (tmpValue < stl[side].min) {					
							stl[side].min = tmpValue;
					}
					if (tmpValue > stl[side].max) {
							stl[side].max = tmpValue;
					}
				}
			}
		}
	}
	
	function scanData() {
		stlCom = new styleCommon (
				document.getElementById("selectDateStart").value,
				document.getElementById("selectDateEnd").value
				);
		stl = new Array();
		stl[0] = new style(
			document.getElementById("selectGraph0").value,
			document.getElementById("selectGraph0Type").value,
			document.getElementById("selectGraph0Kind").value,
			((document.getElementById("selectGraph0").value== "0") ? "bsMileage" :
				((document.getElementById("selectGraph0").value== "1") ?	"quantity":"totalPrice")),
			0,
			9999999.9
				);
		stl[1] = new style(
			document.getElementById("selectGraph1").value,
			document.getElementById("selectGraph1Type").value,
			document.getElementById("selectGraph1Kind").value,
			((document.getElementById("selectGraph1").value== "0") ? "bsMileage" :
					((document.getElementById("selectGraph1").value== "1") ? "quantity":"totalPrice")),
			0,
			9999999.9
			);
		setStyleDomain(0);
		setStyleDomain(1);
		
	}
	function graph() {
		blank();
		axis();

		// Left Side Axis's Graph
		lineGraph(0);
		// Left Side Axis's Graph
		lineGraph(1);
	}
	function lineGraph(side) {
		var context = document.getElementById("gra").getContext('2d');
		var lastX = 0;
		var lastY = context.canvas.height;
		var workDate = 0;
		var workValue = 0.0;
		var isFirst = new Boolean(true);
		
		context.beginPath();
		for ( var i = (dataNum - 1); i >= 0; --i) {
			workDate = Date.parse(xmlDoc.getElementsByTagName("supplyDetail")[i]
					.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue);
			if (stl[side].type == "0") {
				workValue += parseFloat(xmlDoc.getElementsByTagName("supplyDetail")[i].getElementsByTagName(stl[side].src)[0].childNodes[0].nodeValue);
			} else {
				workValue = parseFloat(xmlDoc.getElementsByTagName("supplyDetail")[i].getElementsByTagName(stl[side].src)[0].childNodes[0].nodeValue);
			}
			if ((workDate >= stlCom.startDate) 
					&& 	(workDate<=stlCom.endDate)) {
				lastX = context.canvas.width * (workDate - stlCom.startDate)
					/ (stlCom.endDate - stlCom.startDate);
				lastY = context.canvas.height * (stl[side].max - workValue)
					/ (stl[side].max -stl[side].min);
				context.lineWidth = 2;
				if (stl[side].kind == "0") {
					context.lineWidth = 4;
					context.moveTo(lastX, context.canvas.height);
				} else if (isFirst) {
					isFirst = false;
					context.moveTo(lastX, lastY);
				}
				context.lineTo(lastX, lastY);
			}
		}
		context.strokeStyle = stl[side].color;
//		context.shadowColor = 'white';
//		context.shadowBlur = 10;		
		context.stroke();

//		context.restore();

	}
	function axis() {
		axisVer(0);
		axisVer(1);
		axisHrz();
	}
	
	function axisHrz() {
		var context = document.getElementById("horz").getContext('2d');
		var lastX = 0;
		var lastY = 0;
		var workDate = 0;
		var tempDate;
		var	ratch = 5;
		
		pitch = parseInt((stlCom.staInx - stlCom.endInx) / 10) + 1;
		context.lineWidth = 2;
		context.strokeStyle = "black";
		for (var i = stlCom.staInx - pitch; i > stlCom.endInx + pitch; i = i - pitch ) {
			tempDate = xmlDoc.getElementsByTagName("supplyDetail")[i]
				.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
			workDate = Date.parse(tempDate);
			lastX = context.canvas.width * (workDate - stlCom.startDate)
					/ (stlCom.endDate - stlCom.startDate);			
			context.moveTo(lastX, lastY);
			context.lineTo(lastX, lastY + ratch);
			context.fillStyle = "black";
			context.fillText(tempDate, lastX, 20);
		}
		context.moveTo(0, 0);
		context.lineTo(context.canvas.width, 0);
		context.stroke();
	}
	
	function axisVer(side) {
		var context = document.getElementById("ver" + side).getContext('2d');
		var lastX = 0;
		var lastY = 0;
		var	ratch = 5;
		var n = 0;
		var m = 1;
		var p = 0;

		pitch = (stl[side].max - stl[side].min) / 8;
		p = pitch;
		for (var i = 0 ; p > n; i++ ) {
			if (i % 2 == 1) {
				n = 5;
			} else { 
				n = 2;
			}
			m = m * n;
			p = parseInt(p / n);
		}
		pitch = p * m;
		pitchStart = parseInt(stl[side].min / pitch) * pitch;
		stl[side].min = pitchStart;
		pitchEnd = (parseInt(stl[side].max / pitch) + 1) * pitch;
		stl[side].max = pitchEnd;
		num = parseInt((pitchEnd - pitchStart) / pitch);
		lastX = (side == 0) ? context.canvas.width : 0;
		context.lineWidth = 2;
		context.strokeStyle = stl[side].color;
		for (var i = 1; i < num; i++ ) {
			lastY = context.canvas.height * (pitch * i / (pitchEnd - pitchStart));
			context.moveTo(lastX, lastY);
			context.lineTo(lastX + ratch * ((side == 0) ? (-1) : 1), lastY);
			context.fillStyle = stl[side].color;
			context.fillText((pitchEnd - pitch * i) + " " + stl[side].unit,
					10, lastY);
		}
		context.moveTo((side ==0) ? context.canvas.width : 0, 0);
		context.lineTo((side ==0) ? context.canvas.width : 0, context.canvas.height);
		context.stroke();
	}

	function drawGraph() {
		if (((dataNum - document.getElementById("selectDateStart").selectedindex -1)
				- document.getElementById("selectDateEnd").selectedindex) < 2) {
			alert("Invalid Date!");
			document.getElementById("selectDateStart").value = lastStartDate;
			document.getElementById("selectDateEnd").value = lastEndDate;
			return;
		}
		lastStartDate = document.getElementById("selectDateStart").value;
		lastEndDate = document.getElementById("selectDateEnd").value;
		scanData();
		graph();
	}
	
	function blank() {
		var context = document.getElementById("gra").getContext('2d');
		var contextl = document.getElementById("ver0").getContext('2d');
		var contextr = document.getElementById("ver1").getContext('2d');
		var contexth = document.getElementById("horz").getContext('2d');
		  /* ǡΰ򥻥å */
		var grad  = context.createLinearGradient(0,0, 0,context.canvas.height);
		  /* ǡΥեåȤȿ򥻥å */
		grad.addColorStop(0,'rgb(222, 222, 222)');
		grad.addColorStop(1,'rgb(111, 111, 111)');
		/* ǡfillStyleץѥƥ˥å */
//		context.fillStyle = grad;
		context.fillStyle = 'rgba(255,255,255,0.8)';
		context.fillRect(0, 0, context.canvas.width, context.canvas.height);
		contextl.fillStyle = grad;
		contextl.fillRect(0, 0, contextl.canvas.width, contextl.canvas.height);
		contextr.fillStyle = grad;
		contextr.fillRect(0, 0, contextr.canvas.width, contextr.canvas.height);
		contexth.fillStyle = grad;
		contexth.fillRect(0, 0, contexth.canvas.width, contexth.canvas.height);
		 /*  */

	}

	function parseXML() {
		var xmlhttp;
		var tmpDate;

		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "./LancerCediaWagonMileageDataDTD.xml", false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML;

		dataNum = xmlDoc.getElementsByTagName("supplyDetail").length
		document.getElementById("lastSupplyDate").innerHTML = xmlDoc
				.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
		document.getElementById("supplyDate").innerHTML = xmlDoc
				.getElementsByTagName("supplyDate")[(dataNum - 1)].childNodes[0].nodeValue;
		document.getElementById("frequency").innerHTML = dataNum;

		lastendDate = xmlDoc.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
		lastStartDate = xmlDoc.getElementsByTagName("supplyDetail")[(dataNum - 1)]
				.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;

		for ( var i = 0; i < dataNum; i++) {
			totalGasMax += parseFloat(xmlDoc
					.getElementsByTagName("supplyDetail")[i]
					.getElementsByTagName("quantity")[0].childNodes[0].nodeValue);
			totalPriceMax += parseInt(xmlDoc
					.getElementsByTagName("supplyDetail")[i]
					.getElementsByTagName("totalPrice")[0].childNodes[0].nodeValue);
		}
		totalMileageMax = xmlDoc.getElementsByTagName("supplyDetail")[0]
				.getElementsByTagName("totalMileage")[0].childNodes[0].nodeValue;

		document.getElementById("totalMileageMax").innerHTML = totalMileageMax + "km";
		document.getElementById("totalGasMax").innerHTML = (parseInt(totalGasMax * 100)) / 100 + " l";
		document.getElementById("totalPriceMax").innerHTML = (parseInt(totalPriceMax * 100)) / 100 + "yen";
		document.getElementById("aveMileage").innerHTML = (parseInt(totalMileageMax / totalGasMax * 100)) / 100 + " km/l";
		document.getElementById("avePrice").innerHTML = (parseInt(totalPriceMax / totalMileageMax * 100)) / 100 + " yen/km";
		//addSelectOption(form) 
		for (var i = 0; i < dataNum; i++) {
			tmpDate = xmlDoc.getElementsByTagName("supplyDate")[dataNum - i -1].childNodes[0].nodeValue;
			document.getElementById("selectDateStart").options[i] = new Option(tmpDate, tmpDate);
//  		       history.go(0);
		}
		for (var i =0; i < dataNum; i++) {
			tmpDate = xmlDoc.getElementsByTagName("supplyDate")[i].childNodes[0].nodeValue;      
			document.getElementById("selectDateEnd").options[i] = new Option(tmpDate, tmpDate);
//			history.go(0);
  		}
	}

	function decDateStart() {
		var i = 0;
		var j = 0;
		i = stlCom.staInx;
		j = stlCom.endInx;
		if (i == (dataNum - 1)) {
			return;
		}
		i = i + parseInt((i - j) / 3 + 0.4);
		i = ( i >= dataNum) ? dataNum -1 : i;
		lastStartDate = 
			xmlDoc.getElementsByTagName("supplyDetail")[i]
			.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
		document.getElementById("selectDateStart").value = lastStartDate;
		document.getElementById("selectDateStart").focus();
		drawGraph();
    }
	function incDateStart() {
		var i = 0;
		var j = 0;
		i = stlCom.staInx;
		j = stlCom.endInx;
		if ((i - j) < 3 ) {
			return;
		}
		i = i - parseInt((i - j) / 3 + 0.4);
		i = ((i - j) < 3 ) ? j + 2 : i;
		lastStartDate = 
			xmlDoc.getElementsByTagName("supplyDetail")[i]
			.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
		document.getElementById("selectDateStart").value = lastStartDate;
		document.getElementById("selectDateStart").focus();
		drawGraph();
	}

	function decDateEnd() {
		var i = 0;
		var j = 0;
		i = stlCom.staInx;
		j = stlCom.endInx;
		if ((i - j) < 3 ) {
			return;
		}
		j = j + parseInt((i - j) / 3 + 0.4);
		j = ((i - j) < 3 ) ? i - 2 : j;
		lastEndDate = 
			xmlDoc.getElementsByTagName("supplyDetail")[j]
			.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
		document.getElementById("selectDateEnd").value = lastEndDate;
		document.getElementById("selectDateEnd").focus();
		drawGraph();
	}
	
	function incDateEnd() {
		var i = 0;
		var j = 0;
		i = stlCom.staInx;
		j = stlCom.endInx;
		if (j == 0) {
			return;
		}
		j = j - parseInt((i - j) / 3 + 0.4);
		j = ( j < 0) ? 0 : j;
		lastEndDate = xmlDoc.getElementsByTagName("supplyDetail")[j]
			.getElementsByTagName("supplyDate")[0].childNodes[0].nodeValue;
		document.getElementById("selectDateEnd").value = lastEndDate;
		document.getElementById("selectDateEnd").focus();
		drawGraph();
	}
</script>
</head>
<body onload="localStorage.setItem('tdssg' + Date(), 'Open Car Mileage page');setNaviPath(false);parseXML();drawGraph();"
	onunload="localStorage.setItem('tdssg' + Date(), 'Exit from Car Mileage page');">
<h1>Graph of car mileage futureing canvas and xml</h1>
<h3>Please browse with HTML 5 browser</h3>
<div id="container">
<table id="ctrlpanel">
	<tr>
		<td = id="instruction">
			<strong>--Arguments--</strong>
			<p>Select Graph1(Left Axis) <select class="argButton" id="selectGraph0" onchange="retrun;">
				<option value="0">Mileage</option>
				<option value="1">SupliedGas</option>
				<option value="2">Price</option>
				</select>
			<br />Select Graph type <select class="argButton" id="selectGraph0Type" onchange="retrun;">
				<option value="0">cumulative</option>
				<option value="1">respective</option>
				</select>
			<br />Select Graph kind <select class="argButton" id="selectGraph0Kind" onchange="retrun;">
				<option value="0">barChart</option>
				<option value="1">lineChart</option>
				</select></p>
			<p>Select Graph2(Right Axis) <select class="argButton" id="selectGraph1" onchange="retrun;">
				<option value="0">Mileage</option>
				<option value="1" selected>SupliedGas</option>
				<option value="2">Price</option>
				</select>
			<br />Select Graph type <select class="argButton" id="selectGraph1Type" onchange="retrun;">
				<option value="1">respective</option>
				<option value="0">cumulative</option>
				</select>
			<br />Select Graph kind <select class="argButton" id="selectGraph1Kind" onchange="retrun;">
	    			<option value="1">lineChart</option>
				<option value="0">barChart</option>
				</select>
			</p>
		</td>
		<td id ="command">
				<strong>--Submit--</strong>
				<p>Select Start Date <select class="submitButton" id="selectDateStart" 
					onchange="localStorage.setItem('tdssg' + Date(), 'Change Star Date on Fractal page');drawGraph()">
				</select></p>
				<p>Select End Date <select class="submitButton" id="selectDateEnd" 
					onchange="localStorage.setItem('tdssg' + Date(), 'Change End Date on Fractal page');drawGraph()">
				</select></p>
				<input type="button" class="submitButton" value="Draw" 
					onClick="localStorage.setItem('tdssg' + Date(), 'Click Draw Button on Car Mileage page');scanData();drawGraph();"><br>
				<input type="button" class="submitButton" value="Clear" 
					onClick="localStorage.setItem('tdssg' + Date(), 'Click Clear Button on Car Mileage page');blank();"><br>
				<a href="./LancerCediaWagonMileageDataDTD.xml" onClick="setNaviPath(true)">Browse XML DATA</a>
		</td>
		<td id="stastistics">
			<strong>--Stastistics--</strong>
			<p><b>First Supply Date:</b> <span id="supplyDate"></span><br />
			<b>Last Supply Date:</b> <span id="lastSupplyDate"></span><br />
			<b>Supply Frequency:</b> <span id="frequency"></span><br />
			<b>Total Mileage:</b> <span id="totalMileageMax"></span><br />
			<b>Total Suplied Gas:</b> <span id="totalGasMax"></span><br />
			<b>Total Price:</b> <span id="totalPriceMax"></span><br />
			<b>Average Mileage Per Liter</b> <span id="aveMileage"></span><br />
			<b>Average Cost Per Km</b> <span id="avePrice"></span><br />
			</p>
		</td>
	</tr>	
</table>
<br />
<table id="chart">
	<tr>
		<td><canvas id="ver0" width="64" height="450"></canvas></td>
		<td><canvas id="gra" width="800" height="450"></canvas></td>
		<td><canvas id="ver1" width="64" height="450"></canvas></td>
	</tr>
	<tr>
		<td><img src="img/arrowl.gif" class="arrow" id="dateSB" onclick="decDateStart()"><img src="img/arrowr.gif" class="arrow" id="dateSF" onclick="incDateStart()"></td>
		<td><canvas id="horz" width="800" height="40"></canvas></td>
		<td><img src="img/arrowl.gif" class="arrow" id="dateEB" onclick="decDateEnd()"><img src="img/arrowr.gif" class="arrow" id="dateEF" onclick="incDateEnd()"></td>
	</tr>
</table>			
</div>

</body>

</html>
                                                                                        